<template>
    <view class="submit-page">
        <view class="address-container">
            <u-cell-group>
                <u-cell icon="map" 
                    title="请选择配送地址" 
                    isLink 
                    :border="false" 
                    :titleStyle="{'color':'#666'}" 
                    v-if="confirmInfo.userAddress.addressId==0" 
                    @click="nav(`/subpackage/order/pages/address/index`)">
                </u-cell>
                <u-cell icon="map" 
                    :title="`${confirmInfo.userAddress.name} ${confirmInfo.userAddress.mobile}`" 
                    :label="confirmInfo.userAddress.fullAddress" 
                    isLink 
                    :border="false" 
                    @click="nav(`/subpackage/order/pages/address/index`)"
                    v-else></u-cell>
            </u-cell-group>
            <sp-ribbons></sp-ribbons>
        </view>
        <view class="goods-container">
            <u-cell v-for="(item,index) in confirmInfo.list" :key="index">
                <template #icon>
                    <up-image 
                    :show-loading="true" 
                    width="143rpx" 
                    height="143rpx"
                    radius="15rpx"
                    :src="item?.cover"></up-image>
                </template>
                <template #title>
                    <text class="title">{{item?.goodsName}}</text>
                </template>
                <template #label>
                    <view class="label">
                        <view class="key-name">
                            {{item?.keyName}}
                        </view>
                        <view class="item-footer">
                            <view class="quantity">
                                x{{item?.quantity}}
                            </view>
                            <view class="price">
                                ￥{{roundToDecimal((item?.quantity*item?.price),2)}}
                            </view>
                        </view>
                    </view>
                </template>
            </u-cell>
            <u-cell :border="false">
                <template #value>
                    <text class="countQuantity">共{{roundToDecimal(confirmInfo.list.reduce((prev:number,cur:any)=>{
                        return prev+cur.quantity
                    },0),2)}}件商品</text>
                </template>
            </u-cell>
        </view>
        <view class="count-container">
            <u-cell title="订单总金额:" :border="false">
                <template #value>
                    <text class="price">￥{{confirmInfo.list.reduce((prev:number,cur:any)=>{
                        return prev+(cur.quantity*cur.price)
                    },0)}}</text>
                </template>
            </u-cell>
        </view>
        <view class="remark-container">
            <u-textarea placeholder="选填: 买家留言(50字以内)" border="none" count maxlength="50" v-model="params.remarks"></u-textarea>
        </view>
        <view class="footer">
            <view class="info">
                <text class="unit">实付款:</text>
                <text class="price">￥{{roundToDecimal(confirmInfo.list.reduce((prev:number,cur:any)=>{
                        return prev+(cur.quantity*cur.price)
                    },0),2)}}</text>
            </view>
            <view class="button" @click="handelSubmit">提交订单</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { post } from "@/libs/request"
import { roundToDecimal,red,nav } from "@/libs/utils"
import { onLoad,onShow } from "@dcloudio/uni-app";
const confirmInfo = ref<any>({
    list:[],
    userAddress:{
        addressId:0,
        provinceName:"",
        cityName:"",
        districtName:"",
        name:"",
        mobile:"",
        fullAddress:"",
    }
});
/**
 * 请求参数
 */
const params = ref<{
    goodsId:number,
    skuCode:String,
    quantity:number,
    remarks:String
}>({
    goodsId:0,
    skuCode:"",
    quantity:0,
    remarks:""
});
/**
 * 获取确认数据
 */
const getConfirmInfo = ()=>{
    post("order/getConfirmInfo",{},params.value).then((res:any)=>{
        if(res.errCode==0){
            confirmInfo.value = res.data;
        }
    })
}
/**
 * 提交订单
 */
const handelSubmit = ()=>{
    post("order/createOrder",{},params.value).then((res:any)=>{
        if(res.errCode==0){
            red(`/subpackage/order/pages/purchanse/detail?orderId=${res.data.orderId}`)
        }
    })
}
onLoad((opt: any)=>{
    params.value = {
        goodsId:Number(opt?.goodsId),
        skuCode:opt?.skuCode,
        quantity:Number(opt?.quantity),
    }
})
onShow(()=>{
    getConfirmInfo();
})
</script>
<style scoped lang="less">
.submit-page{
    height: 100vh;
    background: #f7f7f7;
    overflow: auto;
    padding-bottom: 150rpx;
    .address-container{
        background-color: #FFFFFF;
    }
    .goods-container{
        margin-top: 30rpx;
        background-color: #FFFFFF;
        .title{
            padding-left: 20rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .label{
            padding: 0 10rpx;
            color: #999;
            .key-name{
                margin-top: 10rpx;
                font-size: 30rpx;
            }
            .item-footer{
                margin-top: 10rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .quantity{
                    font-size: 26rpx;
                }
                .price{
                    color: #ff0000;
                }
            }
        }
        .countQuantity{
            padding: 0 10rpx;
            color: #999;    
        }
    }
    .count-container{
        margin-top: 30rpx;
        background-color: #FFFFFF;
        .price{
            color: #ff0000;
            padding-right: 10rpx;
        }
    }
    .remark-container{
        margin-top: 30rpx;
        background-color: #FFFFFF;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #FFFFFF;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #d6d6d652;
        .info{
            padding-left: 20rpx;
            display: flex;
            align-items: center;
            .unit{
                color: #999; 
                padding-right: 10rpx;
            }
            .price{
                color: #ff0000;
            }
        }
        .button{
            width: 220rpx;
            height: 90rpx;
            line-height: 90rpx;
            background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
            color: #FFFFFF;
            text-align: center;
        }
    }
}
</style>